<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>账号注册</title>
</head>
<!--样式设计由程序员九路提供-->
<style>
    body {
        background-color: pink;
    }

    h1 {
        margin: 0;
    }

    .reg-content {
        margin-bottom: 20px;
    }

    .form-div {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 10px 0px inset;
        border-radius: 10px;
        width: 300px;
        height: 360px;
        top: 10vh;
        right: 10vw;
        padding-left: 20px;
        padding-top: 20px;
    }

    input {
        height: 30px;
        width: 100%;
        border: none;
        border-radius: 5px;
    }

    .buttons > input {
        position: absolute;
        display: block;
        width: 70%;
        height: 40px;
        border: none;
        border-radius: 5px;
        background-color: #3a6cb3;
        margin: 0 auto;
        color: #fff;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%);
    }

    .err_msg {
        color: red;
        font-size: 13px;
        font-weight: 500;
    }

    tr {
        height: 60px;
    }
</style>
<body>
<img src="../imgs/reg_bg_min.jpg" width="100%" height="100%"/>
<!--定义表格布局，类型为form-div-->
<div class="form-div">
    <!--定义标题布局，类型为reg-content-->
    <div class="reg-content">
        <!--定义标题-->
        <h1>欢迎注册</h1>
        <!--定义登陆布局-->
        <!--定义登陆超链接-->
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <!--定义reg-form表单
        action定义表单数据提交地址URL
        method指定表单数据发送方式-->
    <form id="reg-form" action="#" method="get">
        <!--定义表格-->
        <table>
            <!--定义用户名行-->
            <tr>
                <!--定义单元格-->
                <td>用户名</td>
                <!--定义输入框单元格，类型为inputs-->
                <td class="inputs">
                    <!--定义单行文本输入框-->
                    <input name="username" type="text" id="username"/>
                    <!--折行-->
                    <br/>
                    <!--定义输入有误的布局类型为err_msg
                          style="display: none"表示隐藏此布局
                          style="display: block"表示显示此布局-->
                    <span id="username_err" class="err_msg" style="display: none;"
                    >用户名不太受欢迎</span
                    >
                </td>
            </tr>

            <!--定义密码行-->
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password"/>
                    <br/>
                    <span id="password_err" class="err_msg" style="display: none;"
                    >密码格式有误</span
                    >
                </td>
            </tr>

            <!--定义手机号行-->
            <tr>
                <td>手机号</td>
                <td class="inputs">
                    <input name="tel" type="text" id="tel"/>
                    <br/>
                    <span id="tel_err" class="err_msg" style="display: none;"
                    >手机号格式有误</span
                    >
                </td>
            </tr>
        </table>
        <!--定义注册按钮布局，类型为buttons-->
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn"/>
        </div>
        <!--定义折行，类型为clear-->
        <br class="clear"/>
    </form>
</div>

<script>
    /*实现以下需求：
          ① 当输入框失去焦点时，验证输入内容是否符合要求
          ② 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交*/
    /*-----------------------------------------------------*/
    //① 当输入框失去焦点时，验证输入内容是否符合要求
    /*校验用户名：
          当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，
          不符合使 id='username_err' 的span标签显示出来，给出用户提示。*/
    //获取输入框对象
    var usernameInput = document.getElementById("username");
    //获取错误提示对象
    var username_errSpan = document.getElementById("username_err");
    //绑定获得焦点事件
    usernameInput.onfocus = function () {
        username_errSpan.style.display = "none";
    };
    //绑定失去焦点事件
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //获取输入的用户名字符串
        var username = usernameInput.value.trim();
        /*//判断用户名是否符合规则：长度6-12
        let flag = username.length >= 6 && username.length <= 12;*/
        //判断用户名是否符合规则：长度6-12，由单词字符组成
        let reg = /^\w{6,12}$/;
        let flag = reg.test(username);
        if (flag) {
            username_errSpan.style.display = "none";
        } else {
            username_errSpan.style.display = "";
        }
        return flag;
    }

    /*校验密码：
          当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，
          不符合使 id='password_err' 的span标签显示出来，给出用户提示。*/
    var passwordInput = document.getElementById("password");
    var password_errSpan = document.getElementById("password_err");
    passwordInput.onfocus = function () {
        password_errSpan.style.display = "none";
    };
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        var password = passwordInput.value.trim();
        // let flag = password.length >= 6 && password.length <= 12;
        let reg = /^\w{6,12}$/
        let flag = reg.test(password);
        if (flag) {
            password_errSpan.style.display = "none";
        } else {
            password_errSpan.style.display = "";
        }
        return flag;
    }

    /*校验手机号：
          当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，
          不符合使 id='tel_err' 的span标签显示出来，给出用户提示。*/
    var telInput = document.getElementById("tel");
    var tel_errSpan = document.getElementById("tel_err");
    telInput.onfocus = function () {
        tel_errSpan.style.display = "none";
    };
    telInput.onblur = checkTel;

    function checkTel() {
        var tel = telInput.value.trim();
        // let flag = tel.length == 11;
        //长度11，数字组成，第一位是1
        let reg = /^[1]\d{10}$/;
        let flag = reg.test(tel);
        if (flag) {
            tel_errSpan.style.display = "none";
        } else {
            tel_errSpan.style.display = "";
        }
        return flag;
    }

    /*-----------------------------------------------------*/
    //② 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交
    //获取表单对象
    var reg_form = document.getElementById("reg-form");
    reg_form.onsubmit = checkAll;

    function checkAll() {
        //在每一个check方法中设置一个返回值，当三个check方法全部返回true时表示符合要求，否则阻止提交
        return checkUsername() && checkPassword() && checkTel();
    }

</script>
</body>
</html>
